(function () {
  let CD = document.querySelector('#CD')
  let wrapper = CD.querySelector('.s_home')
  let slides = Array.from(wrapper.querySelectorAll('.slide'))


  const queryData = function queryData() {
    return new Promise(resolve => {
      let xhr = new XMLHttpRequest;
      xhr.open('GET', './Alljson/新碟上架/data.json');
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let data = JSON.parse(xhr.responseText);
          resolve(data);
        }
      };
      xhr.send();
    });
  };

  const binding = function binding(data) {
    for (let i = 0; i < data.length; i += 5) {
      let group = data.slice(0, 5)
      let str = `<ul>`
      group.forEach(item => {
        let { pic, p1, p2 } = item
        str += `<li>
        <div class="cd_box">
          <img
            src="${pic}"
            alt="">
          <div class="cd_play "></div>
          <a href="javascript"></a>
        </div>
        <p class="cd_p1">${p1}</p>
        <p class="cd_p2">${p2}</p>
      </li>`
      })
      str += `</ul>`
      return str
    }
  }

  const binding2 = function binding2(data) {
    for (let i = 0; i < data.length; i += 5) {
      let group = data.slice(5,10)
      let str = `<ul>`
      group.forEach(item => {
        let { pic, p1, p2 } = item
        str += `<li>
        <div class="cd_box">
          <img
            src="${pic}"
            alt="">
          <div class="cd_play "></div>
          <a href="javascript"></a>
        </div>
        <p class="cd_p1">${p1}</p>
        <p class="cd_p2">${p2}</p>
      </li>`
      })
      str += `</ul>`
      return str
    }
  }

  queryData().then(value => {
    let html = binding(value)
    let html2 = binding2(value)
    slides[0].innerHTML = html
    slides[1].innerHTML = html2
    slides[2].innerHTML = html
    // console.log(slides[2]);
  })
})()